<template>
    <div class="contain">
        <div class="header">
            <el-button type="primary" @click="addCard()">添加资讯</el-button>
        </div>
        <div class="input_modal">         
            <div class="input-item">
                <span>请输入资讯标题：</span>
                <el-input v-model="infoTitle" placeholder="请输入资讯标题" class="proName"  @keyup.enter.native="search"></el-input>  
            </div>
            <div class="input-item">
                <el-button type="primary" @click="getinformList">查询</el-button>
            </div>
            
        </div>
        <div class="table-content">
            <el-table v-loading="loading"  @selection-change="handleSelectionChange" :data="informList"  style="width: 100%;text-align:center"   :border='true' >
                <el-table-column  fixed="left" 
                    type="selection" min-width='100' align="center">
                </el-table-column>
                <el-table-column  prop="infoTitle"    label="资讯标题"></el-table-column>
                <el-table-column  prop="isTop"  label="爆炸资讯" fixed="right" width='300px'>
                    <template slot-scope="scope">
                       {{scope.row.isTop=='y'?'是':'否'}}
                    </template> 
                  </el-table-column>
                <el-table-column prop="gmtCreated"  label="发布时间"></el-table-column>
                <el-table-column  prop="id"  label="操作" fixed="right" width='300px'>
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="addCard(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleteItem(scope.row.id)">删除</el-button>
                        <!-- <span v-if="tableData[scope.$index].status == 'VERIFIED'">已核实</span> -->
                    </template> 
                  </el-table-column>
            </el-table>
        </div>

        <div class="pagination">
            <el-pagination   @size-change="handleSizeChange"  @current-change="handleCurrentChange"       
                :current-page.sync="pageIndex"              
                :page-size="pageSize"   
                :page-sizes='[10,20,50,100]'    
                layout="sizes, prev, pager, next"       
                :total="pageCount">     
            </el-pagination>
        </div>
        
    </div>
</template>
<script>
    let CONSTANT = require("../../constant/constant.js");
    let common = require("../../common.js");
    export default{
        data(){
            return {
                pageCount:null,
                pageIndex:1,
                pageSize:10,
                informList:[],
                allThemeList:[],
                themeList:[],
                loading: true,
                infoTitle:''
            }
        },
        mounted() {
            this.getinformList();   //分页获取资讯列表
        },
        methods: {
            handleSelectionChange(val) {
               console.log(val)
            },
            getinformList(){
                this.loading = true;
                let url = CONSTANT.URL.INFO.FINDINFOBYPAGE;
                let data = {
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize,
                    infoTitle:this.infoTitle?this.infoTitle:null
                };
                common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                    this.loading = false;
                    let data = res.data.bussData;
                    this.informList = data;
                    this.pageCount = res.data.count
                }) 
            },

            //删除
            deleteItem(id){
                this.$confirm('确定删除?', '提示', {           
                    confirmButtonText: '确定',           
                    cancelButtonText: '取消',           
                    type: 'warning'         
                }).then(() => {           
                    let  url = CONSTANT.URL.INFO.DELETE;
                    let data = {id:id} ;
                    common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                        if(res.status == 200){
                            this.$message({
                                type:'success',
                                message:'删除成功!'
                            });
                            this.getinformList();
                        }
                        else{
                            this.$message({
                                type:'warning',
                                message:res.msg
                            })
                        }
                    })      
                    }).catch(() => {           
                        this.$message({             
                        type: 'info',             
                        message: '已取消删除'           
                    });                   
                });
            },
            //新增编辑
            addCard(id){
                this.$router.push({path:'/consultEdit',query:{'id':id}});
            },

            handleSizeChange(val) {
                this.pageSize= val;
                this.getinformList();
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getinformList();
            },
            handleSelectionChange(val) { 
            
            },
        },
    }
</script>

<style lang="scss">
.contain {
  .el-dialog__body{ padding-left: 0;padding-top: 30px;border-top:1px solid #dedede;}
  .dialog-con{
      background-color: #f5f5f5;
      display: flex;
      justify-content: space-between;
      ul{ 
          width:28%;list-style: none;padding:0;font-size:14px;float: left;margin-top:0;z-index:999;
          li{ list-style: none;height:60px;line-height:60px;text-align: center;display: block;}
          li.active{color:#21b5cc;background-color: #fff;font-size:16px;border-right:2px solid #21b5cc;}
        //   li:hover{font-size:16px; }
      }
      .tab-content{ width: 70%;display: inline-block;padding-left:10%;background-color: #fff;min-height:300px;
        .sort{
            .sort_name{ font-weight: 600;margin-bottom: 5px;}
            .group-list{ padding-left: 20px;
                .el-radio{display:block;margin-left: 0;margin-bottom: 3px;}
            }
        }
      }
      .el-button--default{background-color: #fff !important;}
  }
}
</style>